<template>
	<view style="height: 100%;" class="flex flex-dir-c">
		<u-navbar :is-back="false" :border-bottom="false" title-color="#FFF" :background="{
			background: [2].includes(current) ? 'none' : '#fff'
		}">
			<view class="flex flex-ai-c flex-jc-c" style="width: 100vw;font-size: 28rpx;font-weight: 500;;">
				<template v-if="current === 1">
					<view>
						订单管理
					</view>
				</template>
				<template v-if="current === 2">
					<view>
						个人中心
					</view>
				</template>
			</view>
		</u-navbar>
		
		<view style="width: 100%;height: 100%;">
			<template v-if="current === 1">
				<order :swiperCurrent="swiperCurrent"  @changeTabs="changeTabs" />
			</template>
			<template v-if="current === 2">
				<me @changeTabs="changeTabs" ref="me" />
			</template>
		</view>
		<view style="width: 100%;">
			<!-- <view v-for="(item,i) in tabbarList" :key="item.id" style="text-align: center;" @click="change(item)">
				<image :src="current == item.id ? item.selectedIconPath : item.iconPath"
					style="width: 40rpx;height: 40rpx;"></image>
				<view :style="{'color': current == item.id?'#FCB527':''}">{{item.text}}</view>
			</view> -->
			<c-tabbar @change="change" :current="current" />
		</view>
		
	</view>
</template>

<script>
	import me from './components/me.vue'
	// import home from './components/home.vue'
	import order from './components/order.vue'
	import tabbar from '@/components/tabbar.vue'
	export default {
		name: 'index',
		components: {
			me,
			// home,
			order,
			tabbar
		},
		data() {
			return {
				current: 2,
				swiperCurrent: 0,
				tabbarList: [{
						id: 0,
						pagePath: "", ///pages/index/store
						iconPath: "/static/tabBar/shop1.png",
						selectedIconPath: "/static/tabBar/shop.png",
						text: "线上商城", //线上商城
						centerItem: false
					},
					{
						id: 1,
						pagePath: "/pages/index/tabbar?index=1",
						iconPath: "/static/tabBar/order.png",
						selectedIconPath: "/static/tabBar/actice_order.png",
						text: "订单",
						centerItem: false
					},
					{
						id: 2,
						pagePath: "/pages/index/tabbar?index=2",
						iconPath: "/static/tabBar/me.png",
						selectedIconPath: "/static/tabBar/active_me.png",
						text: "我的",
						centerItem: false
					}
				]
			}
		},
		mounted() {
			uni.hideTabBar()
		},
		onLoad(op) {
			if(op.index) {
				this.current = Number(op.index) || 2
			}
		},
		onShow(){
			if(this.current == 2) {
				this.$nextTick(() => {
					this.$refs.me.init(this.current)
				})
			}
			
		},
		methods: {
			changeTabs(i){
				this.current = 1
				this.swiperCurrent = i
			},
			change(e) {
				//改1
				if (e.id == 0) {
					return uni.switchTab({
						url: '/pages/tabs/index/index'
					})
				}
				this.current = e.id
				this.$nextTick(() => {
					this.$refs.me.init(this.current)
				})
				/* const path = this.tabbarList[e].path
				uni.switchTab({
					url: path
				}) */
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: whitesmoke;
	}
</style>
<style lang="scss" scoped>
	.store-tabbar {
		height: 150rpx;
		background: #fff;
	}
</style>